<template>
    <div class="main">
      <div class="group">
        <div class="logo">
          <div></div>
          <span></span>
          <h3>拼团进度</h3>
        </div>
        <ul>
          <li class="process">
            <div class="box">
              <div></div>
              <p>团长开团</p>
            </div>
          </li>
          <li class="line">
            <div></div>
          </li>
          <li class="process state">
            <div class="box">
              <div class="lingbox">
                <div class="ling"></div>
              </div>
              <p>满2人累计减50</p>
            </div>
            <p class="stage">◀目前在此阶段</p>
          </li>
          <li class="line">
            <div></div>
          </li>
          <li class="process">
            <div class="box">
              <div></div>
              <p>满3人累计减100</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: 'main',
        data () {
            return {

            }
        },
        props:["progress_title",""],
        mounted(){

        },
        methods: {}
    }
</script>

<style scoped>
  .group {
    width: 90%;
    min-height:1.6rem;
    border-bottom:1px solid #dddddd;
    margin:0 auto;
    padding:.2rem;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*align-items: center;*/
    /*justify-content: space-between;*/
  }
  .logo {
    display: flex;
    align-items: center;
  }
  .logo div{
    width: .3rem;
    height: .3rem;
    background: #000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .logo span {
    display: block;
    width: .25rem;
    height: .25rem;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-left:-.1rem;
  }
  .group h3{
    margin-left:.2rem;
    font-size:.4rem;
  }
  ul {
    padding-left:.7rem;
    margin:.3rem 0;
  }
  ul li.process{
    width: 100%;
    height: .6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:.4rem;
  }
  ul li.process .box {
    display: flex;
    align-items:center;
  }
  ul li.process .box>div{
    width: .25rem;
    height: .25rem;
    border:1px solid #999;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul li.process .box .ling {
    width: .1rem;
    height: .1rem;
    background: #000;
  }
  ul li.process .box p {
    margin-left:.3rem;
  }
  ul li.process p {
    color: #999;
  }
  /*ul li.state p.stage {*/
  /*margin-left:1.2rem;*/
  /*}*/
  ul li.state p{
    color: #000 !important;
  }
  ul li.state .lingbox {
    border:1px solid #000 !important;
  }
  ul li.state>div .ling {
    width: .15rem;
    height: .15rem;
    background: #000;
  }
  ul li.line {
    width: 1px;
    height:.5rem;
    background: #999;
    margin-left:.15rem;
  }
</style>
